<div class="nav-bar row">
  <div class="row row-layout">
    <img src="../../assets/images/logo.svg" alt="Excel2Json logo" routerLink="/" class="logo-image" />
    <h5 class="separator" *ngIf="title !== null">|</h5>
    <h6 class="title" *ngIf="title !== null">{{title}}</h6>
  </div>
  <div class="row row-layout">
    <button *ngIf="showUploadButton" igxButton="flat" routerLink="/" class="button button-tranparent">
      <span>UPLOAD ANOTHER FILE</span>
    </button>
    <button *ngIf="showDownloadButton" igxButton="outlined" igxRipple class="button button-outlined" (buttonClick)="onDownloadJsonClicked()">
      <span>DOWNLOAD JSON</span>
    </button>
    <button *ngIf="user === null ? false : showGetLinkButton" igxButton="raised" class="button button-solid" (buttonClick)="onSaveFileClicked()">
      <span>Save File</span>
    </button>

    <div class="help-menu">
      <igx-avatar icon="menu" shape="circle" size="small" *ngIf="user === null || user.imageUrl === null"
        [igxToggleAction]="helpDropDown" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="helpDropDown">
      </igx-avatar>
      <igx-avatar src="{{user?.imageUrl}}" shape="circle" size="small" *ngIf="user?.imageUrl !== null"
        [igxToggleAction]="helpDropDown" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="helpDropDown">
      </igx-avatar>
      <igx-drop-down height="max-content" #helpDropDown class="drop-down">
        <igx-drop-down-item *ngIf="user == null" routerLink="/account/login" [disabled]="false" [isHeader]="false"
          class="dropdown-item">
          Sign In
        </igx-drop-down-item>
        <igx-drop-down-item *ngIf="user != null" routerLink="/account/my-files" [disabled]="false" [isHeader]="false"
          class="dropdown-item">
          My Files
        </igx-drop-down-item>
        <a class="menu-item-help" href="https://github.com/brianlagunas/Excel2Json/issues" target="_blank">
          <igx-drop-down-item [disabled]="false" [isHeader]="false" class="dropdown-item">
            Submit an Issue
          </igx-drop-down-item>
        </a>
        <a class="menu-item-help" href="https://github.com/sponsors/brianlagunas/" target="_blank">
          <igx-drop-down-item [disabled]="false" [isHeader]="false" class="dropdown-item">
            Support this Project
          </igx-drop-down-item>
        </a>
        <igx-drop-down-item (click)="signOut()" *ngIf="user != null" [disabled]="false" [isHeader]="false"
          class="dropdown-item">
          Sign Out
        </igx-drop-down-item>
      </igx-drop-down>
    </div>
  </div>
</div>